<template>
	<!-- 基本信息 -->
	<div class="message">
		<!-- Logo -->
		<div class="logo">
			<img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
			<div class="name text-hidden">
				<span class="bg">NanZhi</span>
				<!-- <span class="sm">.{{ siteUrl[1] }}</span> -->
			</div>
		</div>
		<!-- 简介 -->
		<div class="description cards" @click="changeBox">
			<div class="content">
				<el-icon><Star /></el-icon>
				<div class="text">
					<p>Hello World !</p>
					<p>一个建立于 21 世纪的小站，存活于互联网的边缘</p>
				</div>
				<el-icon><Star /></el-icon>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { GlobalStore } from "@/stores";
const globalStore = GlobalStore();

// 切换右侧功能区
const changeBox = () => {
	globalStore.setHomeView({ ...globalStore.homeView, boxOpenState: !globalStore.homeView.boxOpenState });
};
</script>

<style lang="scss" scoped>
.message {
	.logo {
		display: flex;
		flex-direction: row;
		align-items: center;
		animation: fade 0.5s;
		animation: fade;
		.logo-img {
			width: 120px;
			border-radius: 50%;
		}
		.name {
			width: 100%;
			height: 142px;
			margin-left: 12px;
			font-family: Pacifico-Regular;
			transform: translateY(-8px);
			.bg {
				font-size: 5rem;
			}
			.sm {
				margin-left: 6px;
				font-size: 2rem;
				@media (min-width: 720px) and (max-width: 789px) {
					display: none;
				}
			}
		}
		@media (max-width: 768px) {
			.logo-img {
				width: 100px;
			}
			.name {
				height: 128px;
				.bg {
					font-size: 4.5rem;
				}
			}
		}
	}
	.description {
		max-width: 460px;
		padding: 1rem;
		margin-top: 3.5rem;
		animation: fade 0.5s;
		animation: fade;
		.content {
			display: flex;
			justify-content: space-between;
			.text {
				margin: 0.75rem 1rem;
				margin-right: auto;
				line-height: 2rem;
				p {
					&:nth-of-type(1) {
						font-family: Pacifico-Regular;
					}
				}
			}
			.xicon:nth-of-type(2) {
				align-self: flex-end;
			}
		}
		@media (max-width: 720px) {
			max-width: 100%;
			pointer-events: none;
		}
	}
	@media (max-width: 390px) {
		.logo {
			flex-direction: column;
			.logo-img {
				display: none;
			}
			.name {
				height: auto;
				margin-left: 0;
				text-align: center;
				transform: none;
				.bg {
					font-size: 3.5rem;
				}
				.sm {
					font-size: 1.4rem;
				}
			}
		}
		.description {
			margin-top: 2.5rem;
		}
	}
}
</style>
